<%--
  Created by IntelliJ IDEA.
  User: 林锴
  Date: 2018/3/29
  Time: 9:53
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ page contentType="text/html;charset=UTF-8" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt" %>
<html>
<head>
    <title>${pageName}</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/common.css" media="all">
    <script src="${pageContext.request.contextPath}/static/css/layui/layui.js"></script>
    <script src="${pageContext.request.contextPath}/static/jquery/jquery-1.12.4.js"></script>
</head>
<body>
<div>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>订单号：${code}</legend>
        <label class="tip">${stateMsg}</label>
        <button class="layui-btn" style="float: right;padding-right: 10px" id="add_btn" data-type="add">添加订单项</button><br>
    </fieldset>
    <table class="layui-hide" id="orderItems_table" lay-filter="orderItems_table"></table>

    <script type="text/html" id="tool_bar">
        <a class="layui-btn layui-btn-xs" lay-event="edit">修改信息</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>

    <script>
        var util;
        layui.use(['table','util','laydate','form','layer'],function () {
           var table=layui.table,
               laydate=layui.laydate,
               form=layui.form,
               layer=layui.layer;
                util=layui.util;
           table.render({
               elem: '#orderItems_table'
               ,url:'${pageContext.request.contextPath}/back/orderitem/byorder/load/${orderId}'
               ,cols: [[
                   {field:'sample', width:150, title: '产品',templet:'#sampleTpl' ,sort: true}
                   ,{field:'outdate', width:120,title: '出货日期',templet: '#timeTpl',sort: true}
                   ,{field:'price', width:80, title: '单价',sort: true}
                   ,{field:'count', width:80, title: '数量',sort: true}
                   ,{field:'remark', title: '备注', sort: true}
                   ,{field:'total',fixed:'right', width:80, title: '总价', sort: true}
                   ,{fixed: 'right', width:178, align:'center', toolbar: '#tool_bar'}
               ]]
               ,page:false
               ,id:'id'

           });


           laydate.render({
               elem:'#outdate'
           });

           form.on('submit(check)', function(data){
               return true;
            });

            //操作按钮监听模块
            table.on('tool(orderItems_table)',function (obj) {
                var data=obj.data;
                var event=obj.event;

                if(event=='del'){
                    layer.confirm('要删除这个详情项吗?', function(index){
                        $.post("${pageContext.request.contextPath}/back/orderitem/byorder/delete",{id:data.id},function (state) {
                            var result=eval('('+state+')');
                            if(result){
                                layer.msg("删除成功");
                                obj.del();
                                layer.close(index);
                            }else{
                                layer.msg("删除失败");
                                layer.close(index);
                            }
                        });

                    });
                }
                if(event=='edit'){
                    layer.open({
                        title:'修改页面'
                        ,type: 1
                        ,skin: 'layui-layer-lan'
                        ,area: ['420px','600px']
                        , content: $('#addOrderItem_form')
                        ,success: function(layero, index){
                            $('#addOrderItem_form').attr('action','${pageContext.request.contextPath}/back/orderitem/byorder/modifyInfo');
                            $('#id').val(data.id);
                            $('#sample').find("option[value ='"+data.sample.id+"']").prop("selected","selected");
                            $('#price').val(data.price);
                            $('#count').val(data.count);
                            $('#total').val(data.total);
                            $('#outdate').val(timeFormat(data.outdate));
                            $('#remark').val(data.remark);
                            $('#btn').text("提交修改");
                            form.render();
                        }
                    });
                }
            });

            //搜索添加模块
            var $ = layui.$, active = {

                add:function () {
                    layer.open({
                        title:'添加新订单项'
                        ,type: 1
                        ,skin: 'layui-layer-lan'
                        ,area: ['420px','600px']
                        , content: $('#addOrderItem_form')
                        ,success: function(layero, index){
                            $('#addOrderItem_form').attr('action','${pageContext.request.contextPath}/back/orderitem/byorder/add');
                            $('#id').val("");
                            $('#price').val("");
                            $('#count').val("");
                            $('#total').val("");
                            $('#outdate').val("");
                            $('#remark').val("");
                            $('#btn').text("提交添加");
                            form.render();
                        }
                    })
                }
            };

            $('#add_btn').on('click', function(){
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });
        });

        function sumtotal() {
            $('#total').val($('#price').val()*$('#count').val());
        }

        function formatSample(data) {
            return data.code+":"+data.sampleName;
        }
        function timeFormat(t) {
            var date=new Date(t);
            return util.toDateString(date,'yyyy-MM-dd');
        }

    </script>

    <script type="text/html" id="sampleTpl">
        {{formatSample(d.sample)}}
    </script>
    <script type="text/html" id="timeTpl">
        {{timeFormat(d.outdate)}}
    </script>
</div>

<form id="addOrderItem_form" style="display: none" class="layui-form" action="#" method="post">
    <input type="hidden" id="id" name="id"/>
    <input type="hidden" id="order" name="order.id" value="${orderId}"/>
    <input type="hidden" name="order.code" value="${code}">
    <div class="info_form_body">
        <div class="layui-form-item">
            <label class="layui-form-label">产品:</label>
            <div class="layui-input-block">
                <select id="sample" name="sample.id">
                    <c:forEach var="sample" items="${samples}">
                        <option value="${sample.id}">${sample.sampleName}(${sample.code})</option>
                    </c:forEach>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">单价:</label>
            <div class="layui-input-block">
                <input id="price"  type="text"  name="price"  lay-verify="required|number"  autocomplete="off" class="layui-input"/>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">数量:</label>
            <div class="layui-input-block">
                <input id="count"  type="text"  name="count"  lay-verify="required|number"  autocomplete="off" class="layui-input"/>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">总价:</label>
            <div class="layui-input-block">
                <input id="total"  type="text"  name="total"  lay-verify="required|number"  autocomplete="off" class="layui-input" onclick="sumtotal()"/>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">出货日期:</label>
            <div class="layui-input-block">
                <input id="outdate"  type="text"  name="outdate"  lay-verify="date"  autocomplete="off" class="layui-input"/>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">备注:</label>
            <div class="layui-input-block">
                <textarea id="remark" name="remark" placeholder="备注" class="layui-textarea"></textarea>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button id="btn" lay-submit="" lay-filter="check" class="layui-btn"></button>
            </div>
        </div>
    </div>
</form>

</body>
</html>



